<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>

        div{
            font-size: 30px;
            width: 140px;
            color: purple;
            background-color: orangered;
            margin: 20;
            /*box-shadow:1px 1px 15px black ;*/
            /*设置不透明度*/
            /*opacity: 0.7;*/

        }
        .test1{
            background-color: rgba(255,0,0,1.0);
        }

        .test2{
            background-color: rgba(255,0,0,0.8);
        }
        .test3{
            background-color: rgba(255,0,0,0.6);
        }
        .test4{
            background-color: rgba(255,0,0,0.4);
        }

        .test5{
            background-color: rgba(255,0,0,0.2);
        }
        p{
            font-size: 50px;
            color: red;

            /*水平 垂直 朦胧 颜色*/
            text-shadow: 10px 1px 30px purple;
        }

        .test6{
            background-color: palegoldenrod;
            width: 300px;
            height: 250px;

            border: 5px solid greenyellow;
            /*圆角*/
            /*border-radius: 15px;*/

            /*指定角为圆角*/
            border-top-left-radius: 10px;
            border-top-right-radius: 50px;
            border-bottom-left-radius: 5px;

        }

    </style>
</head>
<body style="background-color: lightgray">
    <div class="test1">test1</div>
    <div class="test2">test2</div>
    <div class="test3">test3</div>
    <div class="test4">test4</div>
    <div class="test5">test5</div>
    <p>小码哥</p>
    <div class="test6">test6test6test6test6</div>

</body>
</html>